<template>
  <div class="contact">
    <div v-for="(item, idx) in messageList" :key="idx"
      >{{ item.from }}:{{ item.msg }}</div
    >
    <button @click="clientOnConnectHandle">加入房间</button>
    <input type="text" v-model="message" />
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { getSession } from '@/utils/session'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
let ROOM_URL = 'http://192.168.1.134:9095/cqsz/chatRoom/'
const authorization = getSession('authorization')
export default {
  // mixins: [sockjsMixins],
  data() {
    return {
      messageList: [{ from: 'test1', msg: '12342124' }],
      message: '',
      room: 18,
    }
  },

  mounted() {
    // console.log(authorization)
    // this.room = id
    ROOM_URL = ROOM_URL + this.room
    // console.log(ROOM_URL)
    // console.log('测试链接.........');
    // // const socket = new SockJS("http://192.168.1.134:9095/cqsz/room/chatRoom/1", null, {
    // const socket = new SockJS("http://192.168.1.134:8234/chatRoom/1", null, {
    //     timeout: 15000,
    // }); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
    // // 获取STOMP子协议的客户端对象
    // const stompClient = Stomp.over(socket);
    // stompClient.connect({}, function (frame) {
    //     console.log('Connected: ' + frame);
    //     stompClient.subscribe('/topic/chatRoom/1', function (message) {
    //         console.log('Received: ' + message.body);
    //         console.log('msg: ' + JSON.parse(message.body).msg);
    //         messageList.push('123');
    //     }.bind(this));
    // });
  },

  methods: {
    downLoad() {},
    clientOnConnectHandle() {
      let headers = {
        Authorization: authorization,
      }
      const self = this
      const socket = new SockJS(ROOM_URL) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
      // 获取STOMP子协议的客户端对象
      const stompClient = Stomp.over(socket)

      stompClient.connect(headers, (frame) => {
        stompClient.subscribe(
          '/topic/chatRoom/' + this.room,
          function (message) {
            this.messageList.push(JSON.parse(message.body))
          }.bind(this),
        )
      })
    },

    sendMessage() {
      if (this.message.trim() !== '') {
        let headers = {
          Authorization: authorization,
        }
        const socket = new SockJS(ROOM_URL) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
        // 获取STOMP子协议的客户端对象
        const stompClient = Stomp.over(socket)

        stompClient.connect(headers, (frame) => {
          stompClient.send(
            '/app/chatRoom/' + this.room,
            {},
            JSON.stringify({ from: 'test1', msg: this.message }),
          )

          this.message = ''
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.contact {
  min-height: 500px;

  .main {
    margin-top: 30px;

    // display: flex;
    // flex-flow: column;
    .gs-info {
      height: 500px;
      // background: url('../assets/bg/zhaopin.jpg') no-repeat center;
      background-size: cover;
      color: #fff;
      position: relative;

      div {
        position: absolute;
        top: 200px;
        left: 50%;
      }
    }

    .gs-addr {
      margin: 30px 0;
      height: 500px;
    }
  }
}
</style>